<script setup lang="ts">
import {ref} from "vue";

// 数据
const Person = ref({
  name: "zhangsan",
  age: 18,
  car: {car1: "奔驰", car2: "比亚迪"}
});

// 方法
function setName() {
  Person.value.name = "lisi";
};

function setAge() {
  Person.value.age = 20;
};

function setCar1() {
  Person.value.car.car1="特斯拉";
};

function setCar2() {
  Person.value.car.car1="";
};

function setCar() {
};
</script>

<template>
  <div class="car1">
    <h2>监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h2>
    <h3>姓名：{{ Person.name }}</h3>
    <h3>年龄：{{ Person.age }}</h3>
    <h3>车辆：{{ Person.car.car1 }}和{{ Person.car.car2 }}</h3>
    <button @click="setName()">修改姓名</button>
    <button @click="setAge()">修改年龄</button>
    <button @click="setCar1()">修改车辆1</button>
    <button @click="setCar2()">修改车辆2</button>
    <button @click="setCar()">修改车辆</button>
  </div>
</template>

<style scoped>
.car1 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>